<template>
    <div id="live">
        <el-container>
            <el-container>
                <el-main>
                    <live-windows @setVideoListLength="setVideoListLength"></live-windows>
                    <footer-card id="footer-card" v-show="videoListLength == 2"></footer-card>
                </el-main>
                <el-aside width="20%" v-show="videoListLength != 2"><sider-card></sider-card></el-aside>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import LiveWindows from '@/components/live/LiveWindows'
import FooterCard from '@/components/live/FooterCard'
import SiderCard from '@/components/live/SiderCard'

export default {
    components:{LiveWindows, FooterCard, SiderCard},
    data() {
        return {
            videoListLength: 4
        };
    },
    methods: {
        setVideoListLength(length) {
            this.videoListLength = length;
        },
    }
};
</script>

<style scoped>
#footer-card {
    margin-top: 30px;
    padding: 0 5px 0 5px;
}

.el-footer {
    background: skyblue;
    text-align: center;
    line-height: 60px;
}

.el-aside {
    /* background-color: #d3dce6;
    color: #333; */
    text-align: center;
}

.el-main {
    /* background-color: #e9eef3;
    color: #333; */
    text-align: center;
    padding: 0;
}

body > .el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}
</style>